<template>
  <div>
<!--    el-row 布局容器-->
    <el-row>
      <el-col :span="6">
        <el-tree
          :data="cateTree"
          :props="defaultProps"
          @node-click="handleNodeClick"
          ref="tree"
        ></el-tree>
      </el-col>
      <el-col :span="18">
        <router-link :to="{path:'/product/addGroup',query:{cateId:categoryId}}">
        <el-button v-if="this.categoryId">添加分组</el-button>
        </router-link>
        <el-table
          :data="attrGroups"
          :stripe="true"
          style="width: 100%">
          <el-table-column prop="attrGroupId" label="编号"></el-table-column>
          <el-table-column prop="attrGroupName" label="分组名"></el-table-column>
          <el-table-column prop="descript" label="描述"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <router-link to=""><el-button>修改</el-button></router-link>
              <el-button  @click="openDialog(scope.row.attrGroupId)">关联</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog title="关联属性" :visible.sync="dialogFormVisible">
      <el-form >
        <el-transfer
          :titles="['所有属性','关联属性']"
          v-model="attrIds" :data="attrList" :props="{key:'attrId',label:'attrName'}"></el-transfer>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRelation">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AttrGroupList",
      data(){
        return{
          cateTree:[],
          defaultProps:{
            children: 'children',
            label: 'categoryName'
          },
          attrGroups:[],
          dialogFormVisible:false,//默认true显示, false隐藏  点击关联属性，显示
          attrList:[],
          categoryId:"",
          attrIds:[],
          groupId:""
        }
      },
      created() {
      this.axios.get("/category/selectTree").then((resp)=>{
        this.cateTree=resp.data;
      })
      },
      methods:{
    //你点击了树的时候，调这个handleNodeClick方法 node树上的节点
        handleNodeClick(node){
          this.categoryId="";
          //判断该节点为叶子节点
          if(node.children.length==0){
            this.categoryId=node.categoryId;
            //获取到被点击的叶子节点
            this.axios.get("/attrGroup/selectById/"+node.categoryId).then((resp)=>{
              this.attrGroups=resp.data;
            });
          }
        },
        openDialog(groupId){
          this.dialogFormVisible=true;//让弹出层显示出来。
          this.groupId=groupId;
          //给弹出层里面的穿梭左侧框赋值
          this.axios.get("/attr/selectById/"+this.categoryId).then((resp)=>{
            this.attrList=resp.data;
          });
          //给穿梭框又测赋值，从数据库里面把该分组下面的属性id查询出来赋值attrIds属性就可以了
          this.axios.get("/attrAttrgroupRelation/selectBIds/"+groupId).then((resp)=>{
           this.attrIds=resp.data.map((rt)=>{
             return rt.attrId});
          })
        },
        saveRelation(){
          this.dialogFormVisible=false
          //发出ajax请求
          this.axios.post("/attrAttrgroupRelation/add",{
            groupId:this.groupId,attrIds:this.attrIds
          }).then((resp)=>{
          //提示保存成功信息
            this.$message.success("关联属性成功");
          })
        }
      }

}
</script>

<style scoped>

</style>
